<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
</head>
<body>
    <div>
    <p>这是一张能说明盒子模型的图</p> 
    <img src="./盒子模型图.jpeg" alt="">
    </div>
    <style>
        div{
            padding-right: 20px; padding-bottom: 40px; padding-left: 30px; margin-right: 25px;
            margin-bottom: 20px; margin-left: 15px;
        }
        img{
            border-left-width: 5px;
            border-right-width:10px;
            border-top-width:8px;
            border-bottom-width:15px;
            border-left-color: brown;
            border-right-color: aqua;
            border-top-color: blue;
            border-bottom-color: cadetblue;
            border-left-style: dashed;
            border-right-style: dotted;
            border-top-style: double;
            border-bottom-style: groove;
        }
    </style>
</body>
</html>